
// 创建数组
const arr = [
    {names:'吴泳谊',num:'13777776666', record:'大学',age:31,hop:'23000'},
    {names:'高横',num:'13777776666',record:'大学',age:32,hop:'10000'},
    {names:'尘海涛',num:'13777776666',record:'大学',age:33,hop:'40000'},
];
console.log(arr);
setPage();
$('.fillin').on('input', function(e){
    let a ;
    if(e.target.getAttribute('name')==='name'){
        let res = /^\D\w{8,16}$/
    
        if(res.test(e.target.value)){
          e.target.style.borderColor='green' ;
          a = true;
        }else{
          e.target.style.borderColor='red' ;
          a = false;
        }
      }else if(e.target.getAttribute('name')==='num'){
        let res = /^\d{11}$/
        if(res.test(e.target.value)){
          e.target.style.borderColor='green' ;
          a = true;
        }else{
          e.target.style.borderColor='red' ;
          a = false;
        }
      }else if(e.target.getAttribute('name')==='age'){
        let res = /^[0-9][0-9]$/
        if(res.test(e.target.value)){
          e.target.style.borderColor='green' ;
          a = true;
        }else{
          e.target.style.borderColor='red' ;
          a = false;
        }
      }else if(e.target.getAttribute('name')==='hop'){
        let res = /^\d{3,}$/
        if(res.test(e.target.value)){
          e.target.style.borderColor='green' ;
          a = true;
        }else{
          e.target.style.borderColor='red' ;
          a = false;
        }
      }else if(e.target.getAttribute('name')==='record'){
        let res = /^[\u4e00-\u9fa5]{0,3}$/;
        if(res.test(e.target.value)){
          e.target.style.borderColor='green' ;
          a = true;
        }else{
          e.target.style.borderColor='red' ;
          a = false;
        }
      }
} )

$('.in').click( function(){
    let names = $('[name="name"]').val();
    let num = $('[name="num"]').val();
    let record = $('[name="record"]').val();
    let age = $('[name="age"]').val();
    let hop = $('[name="hop"]').val();

    arr.push( {names , num , record , age , hop} )
    setPage();
} )
$('.out').click( function(){
    $('[name="name"]').val('');
    $('[name="num"]').val('') ;
    $('[name="record"]').val(''); 
    $('[name="age"]').val('') ;
    $('[name="hop"]').val('') ;
} )
const oTbody = document.querySelector('tbody');
oTbody.addEventListener('click' , function(e){
    if( e.target.getAttribute('name') === 'del' ){
        if( !window.confirm('您确定要删除吗?') ){
            return ; 
        }
        arr.splice( Number(e.target.getAttribute('index')) , 1 ); 

        setPage();
    }
})
$('[name="change"]').click( function(e){
    $('.mask').css( {display : 'block'} )
    $('.amend').css( {display : 'block'} )
} )

$('.changs').click( function(e){
    if( window.confirm('您确定要修改吗') ){
   
        arr[e.target.getAttribute('index')-0].names = $('[name="name2"]').val();
        arr[e.target.getAttribute('index')-0].num = $('[name="num2"]').val();
        arr[e.target.getAttribute('index')-0].record = $('[name="record2"]').val();
        arr[e.target.getAttribute('index')-0].age = $('[name="age2"]').val();
        arr[e.target.getAttribute('index')-0].hop = $('[name="hop2"]').val();
    }
    
    setPage();
    $('.amend').css( {display : 'none'} )

} )
$('.close').click( function(e){
    $('.amend').css( {display : 'none'} )
    $('.mask').css( {display : 'none'} )

} )
function setPage(){
    
    if( arr.length === 0 ){
        $('[name="tbody"]').html( '<tr><td colspan="6">没有匹配数据</td></tr>' );
        return ;
    }
    let str = '' ; 
    arr.forEach(function(item,key){
        str += `
            <tr>
                <td>${item.names}</td>
                <td>${item.num}</td>
                <td>${item.record}</td>
                <td>${item.age}</td>
                <td>${item.hop}</td>
                <td><button name="change" class="change" index="${key}">修改</button><button name="del" class="del" index="${key}">删除</button></td>
            </tr>
        `;
    })
    $('[name="tbody"]').html( str );
}
var box = document.querySelector('.amend'); 
var x, y; 
var isDrop = false; 
box.onmousedown = function(e) {
    var e = e || window.event; 
    x = e.clientX - box.offsetLeft;
    y = e.clientY - box.offsetTop;
    isDrop = true; 
}
document.onmousemove = function(e) {
    if(isDrop) {
        var e = e || window.event;           
        var moveX = e.clientX - x;                    
        var moveY = e.clientY - y; 
        var maxX = document.documentElement.clientWidth - box.offsetWidth;
        var maxY = document.documentElement.clientHeight - box.offsetHeight;
        moveX=Math.min(maxX, Math.max(0,moveX));
        moveY=Math.min(maxY, Math.max(0,moveY));
        box.style.left = moveX + "px";
        box.style.top = moveY + "px";
    } else {
        return;
    }

}
document.onmouseup = function() {
    isDrop = false; 
}